<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">

            <view class="tabTop">
                <view class="title"> {{navBarTitle}}</view>
            </view>
            <view class="registerActivityBox">
                <!-- 活动场次 -->
                <view class="eventSession" v-if="activitySessions.length > 0">
                    <view class="content_title">选择场次</view>
                    <view class="eventSession_content">
                        <view class="sessionItem" v-for="(item,index) in activitySessions" :key="index"
                            @tap="selectSessions(index,item)"
                            :class="{ 'selected-class': selectedSessionIndex === index }">
                            <view class="timeRange ">
                                <view class="startTime">{{item.startTimeStr}} - </view>
                                <view class="endTime">{{item.endTimeStr}}</view>
                            </view>
                            <view class="allDays">共{{item.activityDays}}天</view>
                        </view>
                    </view>
                </view>
                <!-- 选择票价 没名字且没价格时不显示-->
                <view class="ticketPrice" v-if="activityTicket.ticketTypeName || activityTicket.priceMoney">
                    <view class="content_title">选择票价</view>
                    <view class="ticketPrice_content ticketPrice_content_hasName" v-if="activityTicket.ticketTypeName">
                        <view class="ticketName"> {{activityTicket.ticketTypeName}}</view>
                        <template v-if="activityTicket.isFree === 0">
                            <view class="free">免费</view>
                        </template>
                        <template v-else>
                            <view class="price" v-if="activityTicket.priceMoney && activityTicket.priceMoney>0">
                                ¥{{activityTicket.priceMoney}}</view>
                        </template>
                    </view>
                    <!-- 没名字 有价格时显示 -->
                    <view class="ticketPrice_content ticketPrice_content_noName" v-if="!activityTicket.ticketTypeName"
                        style="text-align: center;">
                        <!-- <template v-if="activityTicket.isFree && activityTicket.isFree ==0">
                            <view class="free">免费</view>
                        </template>
                        <template v-else> -->
                            <view class="price" v-if="activityTicket.priceMoney && activityTicket.priceMoney>0">
                                ¥{{activityTicket.priceMoney}}</view>
                        <!-- </template> -->
                    </view>
                </view>
                <!-- 购票数量 -->
                <view class="buyTicket">
                    <view class="content_title">活动门票(限购{{activityTicket.count}}张)</view>
                    <view class="content_subTitle">请按实际人数购买</view>
                    <view class="buyTicket_content">
                        <van-stepper :value="picketcount" min="1" :max="activityTicket.count" integer
                            @change="handleStepperChange" />
                    </view>
                </view>
                <!-- 报名信息 -->
                <view class="joinUserInfo">
                    <view class="content_title">报名信息</view>
                    <view class="joinUserInfo_content">
                        <van-field class="uni-input" focus label="报名人昵称" placeholder="用户昵称" @change="changeNickName"
                            :value="userInfo.nickName" :border="noBorder" hold-keyboard="true"
                            custom-style="color:#111111; font-size:14px;" disabled input-align="right" />
                    </view>
                </view>
                <!-- 活动配件选择 -->
                <view class="activityAccessories">
                    <view class="content_title">选择商品信息</view>
                    <view class="activityAccessories_content">
                        <!-- <view class="select_container">
                            <view class="selectedItem">{{activityInfo.selectedCategory}}</view>
                            <van-dropdown-menu class="dropdown-menu">
                                <van-dropdown-item v-model="activityInfo.selectedCategory" :options="activityInfo.categories"
                                    @change="handleCategoryChange">
                                    请选择
                                </van-dropdown-item>
                            </van-dropdown-menu>
                        </view> -->
                        <view class="activityAccessories_item" v-for="(item,index) in activityInfo.activityAccessories" :key="index">
                            <view class="activityAccessories_item_title"> {{item.typeName}}</view>
                            <view class="activityAccessories_item_content">
                                <view class="activityAccessories_item_content_item inStock"
                                     :class="{ cur_border: (selectedOptionIndex=== index1 || item1.isSelected == true), dis_border: single.disabled , 'out-of-stock':( single.outOfStock)}"
                                    v-for="(item1,index1) in item.activityOptions" :key="index1"
                                    @click="selectedOption(item1,index1,item)">
                                    <!-- <van-checkbox style="width: 34rpx" icon-size="12px" :value="item1.isSelected"
                                        @change="onChangeCheckedBox(e, index, index1)" :label-disabled="true"
                                        use-icon-slot>
                                        <image @click="onChangeCheckedBox(e, index, index1)" slot="icon"
                                            class="checked-img" :src="item1.isSelected? activeIcon : inactiveIcon" />
                                    </van-checkbox> -->
                                    <view>{{item1.value}}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 温馨提示 -->
                <view class="warmReminder">
                    <view class="content_title">温馨提示</view>
                    <view class="warmReminder_content">  <rich-text :nodes="activityInfo.activities.prompt"></rich-text> </view>
                </view>
            </view>

        </scroll-view>
        <template>

            <view class="bottom">
                <view class="agreement" @click="onChange">
                    <van-checkbox style="width: 34rpx" icon-size="12px" :value="checked" @change="onChange"
                        :label-disabled="true" use-icon-slot>
                        <image @click="onChange" slot="icon" class="checked-img"
                            :src="checked ? activeIcon : inactiveIcon" />
                    </van-checkbox>
                    <view style="margin-left: 18rpx;">确认信息真实有效且报名即代表已同意</view>
                    <view class="href" id="secrectAgreement">报名须知</view>
                </view>
                <view>
                    <van-button type="primary" v-if="!checked" @click="gouxuan">立即报名</van-button>
                    <van-button type="primary" @click="toRegisterActivity" v-else :disabled="isSubmitting"
                    :class="{ 'disabled-btn': isSubmitting }">立即报名 {{ activityTicket.isFree == 0 ?
                        '' : '(' +activityTicket.pricePoint +'积分)'}}</van-button>
                </view>
            </view>
        </template>

        <van-toast id="van-toast" />
    </view>
</template>

<script>
import Toast from '@/wxcomponents/vant/toast/toast'
import {signUpActivitiesApi,getActivitySignupInfoApi} from '@/api/activity'

	export default {
		data() {
			return {
				navBarTitle: '报名活动',
                scrolling:false,
                currentItem:0,
                // 活动场次
                activitySessions: [
                    // {
                    //     startTime: '5月15日10:00',
                    //     endTime: '5月31日22:00',
                    //     days: '17'
                    // },
                    // {
                    //     startTime: '6月1日10:00',
                    //     endTime: '6月30日22:00',
                    //     days: '30'
                    // },
                    // {
                    //     startTime: '7月1日10:00',
                    //     endTime: '7月31日22:00',
                    //     days: '31'
                    // },
                    // {
                    //     startTime: '8月1日10:00',
                    //     endTime: '8月31日22:00',
                    //     days: '31'
                    // },
                    // {
                    //     startTime: '9月1日10:00',
                    //     endTime: '9月30日22:00',
                    //     days: '30'
                    // }
                ], //活动场次
                activityInfo: {
                    activityAccessories:[], //活动配件
                    activities:{
                        prompt:'活动开始前 24 小时可取消',
                    },
                    categories:[], //活动配件分类
                    selectedCategory: '', // 选中的分类
                    activityDays:17,
                },
                activityTicket:{
                    isFree:0, //是否免费
                }, //活动票
                userInfo:{
                    nickname:'', //用户昵称
                    phone:'', //用户手机号
                },
                signUpActId:undefined, //已报名活动订单id
               
                picketcount: 1, //购买数量
                checked: false,
                inactiveIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notChecked1126.png',
                activeIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/goodsChecked1126.png',       
                params:undefined, //接受从路由传过来的参数
                activitiesId:undefined, //活动id
                fromEarnPoints:false, //是否来自积分任务
                selectedSessionIndex: null, // 新增选中索引
                selectedSessionItem: null, // 新增选中场次
                selectedCategory: '', // 新增选中分类
                activityControlId: null, // 新增活动控制Id
                selectedCategoryIndex: null, // 新增选中分类索引
                selectedOptionId: null, // 新增选中选项Id
                selectedOptionIndex: -1, // 新增选中选项索引
                isSubmitting: false, // 新增防抖状态
                pageType:undefined,
                pageSymbol:undefined,
			}
		},
		onLoad(data) {
            // 取到路由携带的参数
            if (data && data.params) {
                this.params = JSON.parse(decodeURIComponent(data.params) || '{}')
                console.log(JSON.parse(decodeURIComponent(data.params)))
                console.log('params', this.params)
                this.activitiesId = this.params.activitiesId
                this.fromEarnPoints = this.params.fromEarnPoints || false
                this.pageType = this.params.pageType
                this.pageSymbol = this.params?.pageSymbol || thia.params?.pageSign
                if (this.activitiesId) {
                    this.getActivitiesSignupInfo(this.activitiesId)
                }
            }
		},
        onReady () {

        },
        onShow(){
            //this.getActivitiesSignupInfo(33)
        },
		methods: {
            // 滑动
            scrollPage(e) {
                console.log(e.detail.scrollTop, this.scrolling)
                if (e.detail.scrollTop > 25 && !this.scrolling) {
                    this.scrolling = true
                } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                    this.scrolling = false
                }
            },
            // 返回键
            onClickLeft () {
                if(this.pageSymbol == 'actDetail'){
                    uni.reLaunch({url: '/pages/activityModule/activityDetail?params=' + encodeURIComponent(JSON.stringify(this.params))})
                }else{
                    uni.reLaunch({url: '/pages/activityModule/activityList?params=' + encodeURIComponent(JSON.stringify(this.params))})
                }
            },
            gouxuan () {
                if (!this.checked) {
                    Toast('请先勾选同意报名须知')
                    return false
                }
            },
            // 选择场次
            selectSessions(index,item){
                this.selectedSessionIndex = index
                this.selectedSessionItem = item
            },
            // 用户昵称
            changeNickName(){},
            // 修改数量
            handleStepperChange(e) {
                if (e.detail < 1) {
                    Toast('请至少选择1张票')
                    return
                }
                if(e.detail > this.activityTicket.count){
                    Toast('已超出限购数量')
                    return
                }
                this.picketcount = e.detail;
            },

            selectedOption(item,index,val){
                console.log(item,index)
                this.selectedOptionId = item.id
                this.selectedOptionIndex = index
                this.selectedCategory = val.typeName
                this.activityControlId = item.activityControlId
                item.isSelected = !item.isSelected
            },
            // 报名须知
            onChange (e) {
                if (e.target.id !== 'secrectAgreement') {
                    this.checked = !this.checked
                }
            },
            // 去报名 按钮
            async toRegisterActivity(){
                
                if(this.isSubmitting) return;
                this.isSubmitting = true;
                try {
                    if (this.activitySessions.length >0 && this.selectedSessionIndex === null) {
                        Toast('请选择场次')
                        return false
                    }
                    const apiParams = {
                        activitiesId: this.activitiesId,
                        ticketId: this.activityTicket.id,
                        ...(this.activitySessions.length > 0 && { sessionId: this.selectedSessionItem?.id }),
                        picketcount: this.picketcount,
                        controlId: this.activityControlId,
                        optionId: this.selectedOptionId,
                    }
                    console.log(apiParams)
                    const res = await signUpActivitiesApi(apiParams)
                    if (res.code === 200) {
                        this.signUpActId = res.data.activitySignup.id
                        Toast('报名成功')
                        const params = {
                            activitiesId: this.activitiesId,
                            signUpActId: this.signUpActId,
                            ticketId: this.activityTicket.id,
                            sessionId: this.selectedSessionItem ? this.selectedSessionItem.id :undefined,
                            pageSymbol: 'act',
                            signUpInfo:res.data.activitySignup || {}, //报名信息
                            pageType:this.pageType,
                        }
                        if(this.activityTicket.isFree == 1){
                            uni.navigateTo({
                                url: '/pages/payment/cashPage?params=' +
                                    encodeURIComponent(JSON.stringify(params))
                            })
                            return
                        }
                        uni.navigateTo({
                            url: '/pages/activityModule/registResult?params=' +
                                encodeURIComponent(JSON.stringify(params))
                        })
                    }
                } finally {
                    setTimeout(() => {
                        this.isSubmitting = false;
                    }, 500); // 500毫秒防抖时间
                }
            },

            // 报名活动  获取报名信息
            async getActivitiesSignupInfo(activitiesId){
                const res = await getActivitySignupInfoApi(activitiesId)
                if (res.code === 200) {
                    this.userInfo.nickName = res.data.nickName
                    this.userInfo.phone = res.data.phone
                    console.log(this.userInfo)
                    this.activityTicket = res.data.activityTicket //活动票
                    this.activitySessions = res.data?.activitySessions || [] //活动场次
                    // this.activityInfo = res.data
                    this.activityInfo.activities = res.data.activities //活动信息
                    // this.activityInfo.activityAccessories = res.data.activityControls
                    this.activityInfo.activityAccessories = res.data.activityControls.map(accessory => {
                        return {
                            ...accessory,
                            activityOptions: accessory.activityOptions.map(option => ({
                                ...option,
                                isSelected: option.isSelected || false
                            }))
                        }
                    })
                    // this.activityInfo.categories = res.data.activityControls.map(c => ({
                    //     text: c.typeName,
                    //     value: c.id
                    // }));
                    // if (this.activityInfo.categories.length > 0) {
                    //     this.activityInfo.selectedCategory = this.activityInfo.categories[0].value;
                    // }
                    console.log(this.activityInfo,this.activityTicket,'activityTicket',this.activityTicket.isFree)
                }else{
                    if(res.code == 500 && res.message.includes('已报名')){
                        // Toast(res.msg)
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1000);
                    }
                }
            },
            // async addActivitiesRegistrations(){
            //     const apiParams = {
            //         activitiesId: this.activitiesId,
            //         ticketId: this.activityTicket.id,
            //         // ticketCount: this.picketcount,
            //         sessionId: this.selectedSessionItem.id,
            //         picketcount:this.picketcount,
            //         controlId: this.activityInfo.selectedCategory,
            //         optionId: 73,
            //     }
            //     const res = await signUpActivitiesApi(apiParams)
            //     if (res.code === 200) {
            //         Toast('报名成功')
            //     }
            // }
		}
	}
</script>

<style  lang="scss" scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:calc(100vh - env(safe-area-inset-bottom));
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding-top:25px;
    padding-left: 24px;
    padding-right: 24px;
}
.title{
    font-size: 30px;
    text-align: left;
    color: #111111;
}
.registerActivityBox{
    margin-top: 108rpx;
    padding: 0px 48rpx;
    padding-bottom: calc(188rpx + env(safe-area-inset-bottom));

    .content_title{
        font-size: 32rpx;
        color: #111111;
        line-height: 32rpx;
    }
    .content_subTitle{
        font-size: 26rpx;
        color: #111111;
        line-height: 26rpx;

        margin-top: 34rpx;
    }
    // 选择场次
    .eventSession{
        .eventSession_content{
            margin-top: 40rpx;
            display: flex;
            justify-content: space-between;
            // justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap; /* 允许Flex项目换行 */

            .sessionItem{
                padding: 24rpx;
                border: 1px solid #D4D4D4;
                display: flex;
                flex-direction: column;
                width: 40%;  
                margin-bottom: 28rpx;
                transition: all 0.3s ease; // 添加过渡效果
                &.selected-class {
                    border-color: #FF6203; // 选中时的边框颜色
                    background-color: #FFF5F0; // 选中时的背景色
                }

                .timeRange{
                    font-size: 26rpx;
                    color: #111111;
                    line-height: 34rpx;
                }
                .allDays{
                    margin-top: 38rpx;
                    font-size: 24rpx;
                    color: #111111;
                    line-height: 24rpx;
                }
            }
            .selected-text {
                color: #FF6203 !important; // 选中时文字颜色
            }
        }
    }

    // 选择票价
    .ticketPrice{
        margin-top: 93rpx;
        .ticketPrice_content_hasName{
            text-align: left;
            width: 30%;
        }
        .ticketPrice_content_noName{
            text-align: center;
            width: 40%;  
        }
        .ticketPrice_content{
            margin-top: 40rpx;
            border: 2rpx solid #111111;
            font-size: 26rpx;
            color: #111111; 
            padding: 24rpx;
        }
        .ticketName{
            margin-bottom: 40rpx;
        }
        .free{
            font-weight: bolder;
        }
        .price{
            font-size: 26rpx;
            color: #111111;
        }
    }
    // 选购活动门票
    .buyTicket{
        margin-top: 124rpx;
        .buyTicket_content{
            margin-top: 48rpx;
        }
    }

    // 报名信息
    .joinUserInfo{
        margin-top: 86rpx;
        .joinUserInfo_content{
            margin-top: 50rpx;
        }
    }

// 活动配件选择
.activityAccessories {
    margin-top: 100rpx;

    .activityAccessories_item {
        margin-top: 60rpx;
        padding-bottom: 40rpx;
        border-bottom: 1rpx solid #F5F5F5;

        &_title {
            font-size: 32rpx;
            color: #111111;
            font-weight: 500;
            // margin-bottom: 40rpx;
        }

        &_content {
            &_item {
                display: flex;
                align-items: center;
                margin-top: 32rpx;

                .checked-img {
                    width: 34rpx;
                    height: 34rpx;
                    margin-right: 18rpx;
                }

                view {
                    font-size: 28rpx;
                    color: #666666;
                }
            }
        }
    }

    .activityAccessories_item_content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }

    .activityAccessories_item_content_item {
        margin-right: 12px;
        margin-bottom: 12px;
        height: 28px;
        line-height: 28px;
        padding-left: 24px;
        padding-right: 24px;
    }

    // 有库存
    .inStock {
        border: 1px solid #D6D6D6;
        font-size: 13px;
        text-align: center;
        color: #333333;

        &.active {
            border: 1px solid #111111;
            color: #111111;
            font-size: 14px;
        }
    }
    .select_container{
        display: flex;
        align-items: center;
        padding: 16px;
    }
    .selected-info {
        flex: 1;
        margin-right: 16px;
    }

    .dropdown-menu {
        flex: 2;
    }
}

// 温馨提示
.warmReminder{
    margin-top:100rpx;
    .warmReminder_content{
        margin-top: 34rpx;
        font-size: 26rpx;
        text-align: left;
        color: #111111;
        line-height: 26rpx;
    }
}
}
.cur_border {
    border-color: #111111 !important;
    color: #111111;
}

.dis_border {
    position: relative;
    border-color: #999999 !important;
    font-size: 26rpx;
    color: #999999 !important;
    pointer-events: none;
    opacity: 0.6;
}
// 报名
.agreement{
    padding: 32rpx 48rpx 0px 0rpx;
}
.agreement {
  height: 44rpx;
  line-height: 44rpx;
  font-size: 24rpx;
  color: #111111;
  display: flex;
  align-items: center;

  view{
    line-height: 24rpx;
    font-size: 24rpx;
  }
  .href {
    color: #ff6203;
    }
}
.disabled-btn {
    // background-color: #cccccc !important;
    border-color: #cccccc !important;
}

.checked-img {
  height: 34rpx;
  width: 34rpx;
  margin-top: 4px;
  margin-right: 18rpx;
}
button::after{
  border: none;
}
.button-hover{
  background-color: transparent;
}

.bottom{
    padding: 0rpx 48rpx;
    padding-bottom: calc(0rpx + env(safe-area-inset-bottom));

}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}
::v-deep .minus-class,
.van-stepper__minus,
.van-stepper__minus--disabled {
    border-radius: 50px !important;
}

// stepper    步进器
// 左边的数字
::v-deep .minus-class,
.van-stepper__minus {
    border-radius: 50px !important;
    background-color: #ffffff !important;
    border: 1px solid #111111 !important;
    width: 23px !important;
    height: 23px !important;
    line-height: 23px !important;
}

// 及不能被点击的最小数字
::v-deep .van-stepper__minus--disabled {
    border-radius: 50px !important;
    background-color: #ffffff !important;
    border: 1px solid #999999 !important;
    width: 23px !important;
    height: 23px !important;
    line-height: 23px !important;
}

// 中间的数字
::v-deep .input-class,
.van-stepper__input {
    border-radius: 50px !important;
    background-color: transparent !important;
}

// 右侧最大的数字
::v-deep .plus-class,
.van-stepper__plus {
    border-radius: 50px !important;
    background-color: #ffffff !important;
    border: 1px solid #111111 !important;
    width: 23px !important;
    height: 23px !important;
    line-height: 23px !important;
}

// 以及不能被点击状态
::v-deep .van-stepper__plus--disabled {
    border-radius: 50px !important;
    border: 1px solid #999999 !important;
    background-color: #ffffff !important;
    width: 23px !important;
    height: 23px !important;
    line-height: 23px !important;
}

// 用户昵称
::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}
// lebel
:v-deep .van-field__label--disabled {
    font-size: 26rpx;
    text-align: left;
    color: #111111 !important;
}
::v-deep .van-field__control--disabled {
    font-size: 26rpx;
    text-align: right;
    color: #666666 !important;
}

// 立即报名
::v-deep .van-button--primary {
  width: 100%;
  margin-top: 32rpx;
  height: 86rpx;
  border-radius: 50rpx;
  background: #ff6203;
}
</style>
